<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Album with ML HZ</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        .div_top {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .div_body {
            background-image: url('背景2.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: local;
            width: 100%;
            height: 1208px;
            background-color: #FFF0F5;
            margin-top: 0px;
        }

        .div_title {
            width: 40%;
            height: 60px;
            margin: 0 auto; /* 居中标题 */
            font-size: 20px;
            color: #FFB6C1;
            text-align: center;
            line-height: 60px; /* 调整以匹配高度 */
            text-shadow: 2px 2px 8px #FFFFFF;
        }

        .div_header {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100px;
        }

        .div_image_container {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }

        .div_bodyimage {
            height: 50px;
            width: 50px;
            margin-right: 1rem;
        }

        .div_headimage {
            height: 40px;
            width: 40px;
            margin-left: 25px;
            float: left;
            margin-top: 5px;
        }

        .div_btn {
            background: #eb94d0;
            background-image: -webkit-linear-gradient(top, #f9c6e7, #b6d9f4);
            background-image: -moz-linear-gradient(top, #f9c6e7, #b6d9f4);
            background-image: -ms-linear-gradient(top, #f9c6e7, #b6d9f4);
            background-image: -o-linear-gradient(top, #f9c6e7, #b6d9f4);
            background-image: linear-gradient(to bottom, #f9c6e7, #b6d9f4);
            -webkit-border-radius: 20;
            -moz-border-radius: 20;
            border-radius: 20px;
            font-family: Arial;
            color: #fafafa;
            font-size: 10px;
            padding: 6px;
            text-decoration: none;
            border: none;
        }

        .div_btn:hover {
            background: #2079b0;
            background-image: -webkit-linear-gradient(top, #2079b0, #eb94d0);
            background-image: -moz-linear-gradient(top, #2079b0, #eb94d0);
            background-image: -ms-linear-gradient(top, #2079b0, #eb94d0);
            background-image: -o-linear-gradient(top, #2079b0, #eb94d0);
            background-image: linear-gradient(to bottom, #2079b0, #eb94d0);
            text-decoration: none;
        }

        .audio_player {
            margin-top: 1rem; /* 与标题之间留出一定距离 */
        }
    </style>
</head>
<body>
    <div class="div_top">
        <div class="div_body">
            <div class="div_header">
                <div class="div_title">
                    <h1><i>Album with ML HZ</i></h1>
            </div>

<!--            <div class="div_headimage_container">-->
<!--                    <a href="99.jpg" target="_blank" rel="noopener noreferrer">-->
<!--                        <div class="div_headimage">&#128149;</div>-->
<!--                    </a>-->
<!--            </div>-->

<!--                <div class="div_image_container">-->
<!--                    <img class="div_bodyimage" height="50" width="50" src="ll.jpg"/>-->
<!--                    <button class="div_btn" onclick="alert('天下第一好牛牛')">玲玲</button>-->
<!--                </div>-->
<!--                <div class="div_image_container">-->
<!--                    <img class="div_bodyimage" height="50" width="50" src="zz.jpg"/>-->
<!--                    <button class="div_btn" onclick="alert('天下第一好哲哲')">哲哲</button>-->
<!--                </div>-->
            </div>

            <audio class="audio_player" autoplay controls loop preload="auto" src="http://demo.mimvp.com/html5/take_you_fly.mp3"></audio>

            <p id="result"></p>
        </div>
    </div>
</body>
</html>